<template>
  <view>
    <view class="filter-title">
      <view class="filter-item-item" @click="open">
        全部课程
      </view>
      <view class="filter-item-item">
        <uni-data-select v-model="value" :localdata="filterTitle" @change="change"></uni-data-select>
      </view>
    </view>

    <my-hot-item v-for="(v, i) in list" :key="i" :image="v.image" :title="v.title" :count="v.count">
      <text>{{ v.type }}</text>
    </my-hot-item>


    <view>
      <uni-popup ref="popup" background-color="#fff">
        <view class="popup-content"><text class="text">popup 内容</text></view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        value: "全部",
        filterTitle: [{
            value: '全部',
            text: "全部"
          },
          {
            value: '即将开课',
            text: "即将开课"
          },
          {
            value: '开课中',
            text: "开课中"
          },
          {
            value: '已结课',
            text: '已结课'
          }
        ]
      };
    },
    onLoad() {
      this.getList('')
    },
    methods: {
      open() {
        this.$refs.popup.open('left')
      },
      close() {
        this.$refs.popup.close()
      },
      change(e) {
        if (e === '全部') this.getList('')
        else this.getList(e)
      },
      getList(type) {
        uni.request({
          url: 'http://localhost:3000/list',
          data: {
            type_like: type
          },
          success: (resp) => {
            console.log(resp)
            this.list = resp.data
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .filter-title {
    display: flex;

    .filter-item-item {
      flex: 1;
    }
  }
</style>
